<template>
    <view class="Collection">
        <uv-navbar
            title="我的收藏"
            @leftClick="leftClick"
            bg-color="linear-gradient(to right, #D2F1DE 0%, #E3F6E8 50% ,#D2F1DE 100%)"
            :fixed="true"
            :placeholder="true"
        ></uv-navbar>
        <view class="cart">
            <view class="cart-item" v-for="i in getlist" :key="i" @click.stop="Godetail(i.id)">
                <image
                    :src="BaseUrl + i.cover"
                    style="border-radius: 20rpx; width: 200rpx; height: 200rpx; margin-left: 20rpx"
                    mode="scaleToFill"
                />
                <view class="cart-get">
                    <view class="cart-title">{{ i.title }}</view>

                    <view class="cart-right-bon">
                        <view
                            class="cart-right-left"
                            style="width: 180rpx; display: flex; line-height: 60rpx"
                        >
                            <image
                                :src="BaseUrl + '/static/catering/Eyeo.png'"
                                style="width: 26rpx; height: 26rpx"
                                mode="scaleToFill"
                            />
                            <text class="cart-right-left-text">{{ i.views }}</text>
                        </view>
                        <view class="cart-right-right" @click.stop="dian(i.id)">
                            <view v-if="i.isLike == 0" class="cart-right-ss">
                                <image
                                    :src="BaseUrl + '/static/catering/noollection.png'"
                                    style="width: 30rpx; height: 30rpx"
                                    mode="scaleToFill"
                                />
                                <view class="cart-right-s-texts">未收藏</view>
                            </view>
                            <view v-else class="cart-right-s">
                                <image
                                    :src="BaseUrl + '/static/catering/shouc.png'"
                                    style="width: 30rpx; height: 30rpx"
                                    mode="scaleToFill"
                                />
                                <view class="cart-right-s-text">已收藏</view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { getCollectionList } from "@/utils/play.js";
import { BaseUrl } from "@/utils/req.js";
export default {
    data() {
        return {
            BaseUrl,
            list: [
                {
                    name: "全部",
                },
                {
                    name: "商品收藏",
                },
                {
                    name: "团购收藏",
                },
            ],
            getlist: [],
            type: "goods",
            page: 1, //分页
            total: 0, //总条数
            userData: {
                user_no: "",
            },
        };
    },
    onLoad() {},
    methods: {
        Godetail(id) {
            uni.navigateTo({
                url: `/dabai/pages/zcDetails/zcDetails?id=${id}`,
            });
        },
        leftClick() {
            uni.navigateBack();
        },
        loadData() {
            this.$request
                .post("/api/wanlshop.find.user/userInfo", {
                    id: this.find_user,
                })
                .then((res) => {
                    if (res.data.user_id === this.$store.state.user.id) {
                        this.isMyfind = true;
                    }
                    this.userData = res.data;
                });
        },
        //种草收藏列表
        getCaoCollection() {
            this.$request
                .post("api/wanlshop.find.find/getList?", {
                    type: "likes",
                    user_no: this.userData.user_no,
                    page: this.page,
                })
                .then((res) => {
                    console.log(res.data, "种草收藏");
                    this.getlist = [...this.getlist, ...res.data.data];
                    this.total = res.data.total;
                    console.log("种草收藏", res.data.data);
                });
        },
        // 取消收藏
        async dian(id) {
            await this.$request
                .post("api/wanlshop/find/user/setFindUser", {
                    id: id,
                    type: "likes",
                })
                .then((res) => {
                    console.log(res, "取消收藏");
                    if (res.data.data == 0) {
                        uni.showToast({
                            title: "取消成功",
                            icon: "none",
                        });
                        this.page = 1;
                        this.getlist = [];
                        this.getCaoCollection();
                    }
                    //  else {
                    //     uni.showToast({
                    //         title: "取消收藏",
                    //         icon: "none",
                    //         duration: 2000,
                    //     });
                    //     this.getArticle();
                    // }
                });
        },
    },
    onReachBottom() {
        if (this.getlist.length == this.total) return;
        this.loading = true;
        this.page++;
        this.getCaoCollection(); //收藏列表
    },
    onShow() {
        this.page = 1;
        this.getlist = [];
        this.getCaoCollection();
    },
};
</script>

<style lang="scss" scoped>
/deep/.uv-tabs__wrapper__nav__item {
    width: 33% !important;
}

.Collection {
    width: 100%;
    height: 100vh;
    background: linear-gradient(to bottom, #d3f1de 0%, #f4f6f5 30%, #f6f6f6 100%);

    .tabs {
        margin: 0 20rpx;
        padding-top: 180rpx;
    }

    .cart {
        width: 94vw;
        margin: 0 3vw;
        padding-top: 20rpx;

        .cart-item {
            width: 100%;
            height: 240rpx;
            background-color: #fff;
            border-radius: 16rpx;
            display: flex;

            align-items: center;
            margin-bottom: 20rpx;
            margin-bottom: 18rpx;
            position: relative;

            .cart-get {
                width: 56vw;
                height: 200rpx;
                margin-left: 20rpx;

                display: flex;
                flex-direction: column;
                justify-content: space-between;
                .cart-right-bon {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-top: 20rpx;

                    .cart-right-left {
                        .cart-right-left-text {
                            margin-left: 10rpx;
                            font-family: Source Han Sans CN;
                            font-weight: 400;
                            font-size: 26rpx;
                            color: #666666;
                        }
                    }

                    .cart-right-right {
                        display: flex;
                        align-items: center;

                        .cart-right-s {
                            display: flex;
                            align-items: center;
                            margin-right: 20rpx;
                            border-radius: 30rpx;
                            border: 1rpx solid #057849;
                            padding: 6rpx 15rpx;

                            .cart-right-s-text {
                                margin-left: 10rpx;
                                font-family: Source Han Sans CN;
                                font-weight: 400;
                                font-size: 26rpx;
                                color: #057748;
                            }
                        }

                        .cart-right-ss {
                            display: flex;
                            align-items: center;
                            margin-right: 20rpx;
                            border-radius: 30rpx;
                            border: 1rpx solid #666;
                            padding: 6rpx 15rpx;

                            .cart-right-s-texts {
                                margin-left: 10rpx;
                                font-family: Source Han Sans CN;
                                font-weight: 400;
                                font-size: 26rpx;
                                color: #666666;
                            }
                        }
                    }
                }
                .cart-title {
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    font-size: 28rpx;
                    color: #121212;
                    line-height: 1.2;
                    margin-top: 10rpx;
                }

                .cart-text {
                    height: 40rpx;
                    margin-top: 10rpx;
                    display: flex;
                    align-items: center;
                    font-family: Source Han Sans CN;

                    .cart-price {
                        font-family: Source Han Sans CN;
                        font-weight: 500;
                        font-size: 30rpx;
                        color: #eb5c20;
                        padding: 0 20rpx 0 0;
                    }

                    .cart-vip {
                        font-family: Source Han Sans CN;
                        font-weight: 400;
                        font-size: 22rpx;
                        color: #eb5c20;
                        border-left: 1rpx solid #eb5c20;
                        padding: 0 10rpx;
                        height: 20rpx;
                    }
                }

                .cart-integration {
                    font-family: Source Han Sans CN;
                    font-weight: 300;
                    font-size: 24rpx;
                    color: #999999;
                    margin: 12rpx 0 0 0;
                }

                .cart-shop {
                    font-family: Source Han Sans CN;
                    font-weight: 300;
                    font-size: 24rpx;
                    color: #999999;
                    margin: 12rpx 0 0 0;
                }
            }

            .cart-delete {
                width: 150rpx;
                height: 50rpx;
                position: absolute;
                right: -18rpx;
                bottom: 10rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 24rpx;
                color: #999999;
            }
        }
    }
}
</style>
